<template>
  <view :class="{'active':active}" class="mz-sidebar_item" @tap="$emit('click')">
    <text>{{ name }}</text>
  </view>
</template>

<script>
  export default {
    props: {
      active: {
        type: Boolean,
        default: () => false
      },
      name: {
        type: String,
        default () {
          return ""
        }
      },
      data: {
        type: Object,
        default () {
          return {
            name: ""
          }
        }
      }
    },
    methods: {}
  }
</script>

<style scoped lang="scss">
  .mz-sidebar_item {
    &.active {
      background-color: #ffffff;

      &::before {
        width: 3px;
        height: 100%;
        background-color: $uni-color-primary;
        position: absolute;
        left: 0;
      }

    }

    text-align: center;
    color: #000000;
    font-size: $uni-font-size-lg;
    padding: 15rpx 5rpx;
  }
</style>
